<template>
  <div id="box">
    <div>
      <h3>老百姓自营商城</h3>
      <div>
        <input type="text">
        <button>搜索</button>
      </div>
    </div>


    <div class="tab">
      <div>
        <ul>
          <li v-for="(item,index) in tabArr" :key="index" @click="tabIndex=index">{{ item }}</li>
        </ul>
      </div>
      <div class="content">
        <div v-for="(item) in tabMOD" :key="item.id">
          <img :src="item.img">
          <div>{{ item.name }}</div>
          <div class="add"><span>{{ item.price }}</span><button @click="addToCart(item)">添加</button></div>
        </div>
      </div>
    </div>
    <div class="Shopping_Cart">
        <div class="Shopping_Cart_content1" v-show="Shopping_Cart_show==true">
            <div v-for="(item) in Cart" :key="item.id" class="Shopping_Cart_content1_item">
              <input type="checkbox" @click="item.is=!item.is">
              <img :src="item.img">
              <div class="Shopping_Cart_content1_item_right">
                <span>{{ item.name }}</span>
                <div class="Shopping_Cart_content1_item_right_price">
                  <span>{{ item.Total_price | formatPrice }}</span>
                  <div>
                    <button @click="Cart_num(item.id,'-')">-</button>
                    <span>{{ item.num }}</span>
                    <button @click="Cart_num(item.id,'+')">+</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div class="Shopping_Cart_content2">
          <div>
            <img src="../../public/购物车.png" @click="Shopping_Cart_show=!Shopping_Cart_show">
            <span>购物车</span>
          </div>
          <span>{{ totalPrice | formatPrice }}</span>
          <button @click="toSettlement()">去结算</button>
        </div>
    </div>
  </div>
</template>
<script>
  // 导入组件
  
  export default {
    // 注册组件
    components: {
     },
    // 实例属性
    name: 'APP',
    // 数据
    data () {
      return {
        Shopping_Cart_show:true,
        tabIndex:0,
        tabArr:['热门推荐','新品推荐','清凉一夏','呵护肠胃'],
        arr:[{
          Tid:0,
          id:1,
          name:'京都念慈菴 京都念慈菴蜜炼川贝枇杷膏150ml',
          price:33.8,
          img:require('../../public/1.png')
        },{
          Tid:0,
          id:2,
          name:'华润三九 感冒灵颗粒10g*9袋',
          price:33.8,
          img:require('../../public/2.png')
        },{
          Tid:1,
          id:3,
          name:'汤臣倍健 汤臣倍健白金蛋白粉礼盒装330G*2',
          price:249,
          img:require('../../public/3.png')
        },{
          Tid:1,
          id:4,
          name:'维诺健(ZY)维诺健蛋白粉450G(10G*45袋)',
          price:199,
          img:require('../../public/4.png')
        },{
          Tid:2,
          id:5,
          name:'太极集团 藿香正气口服液10ml*10支',
          price:19.9,
          img:require('../../public/5.png')
        },{
          Tid:2,
          id:6,
          name:'药圣堂(ZY)藿香正气水10ml*8支',
          price:15.8,
          img:require('../../public/6.png')
        },{
          Tid:3,
          id:7,
          name:'汤臣倍健 LIFE-SPACE益生菌粉30g(1.5g*20袋)',
          price:80.1,
          img:require('../../public/7.png')
        },{
          Tid:3,
          id:8,
          name:'华润江中 健胃消食片0.8g*64片',
          price:29.8,
          img:require('../../public/8.png')
        }],
        Cart:[]
       }
     },
     // 实例方法
     methods: {
      // 添加到购物车
      addToCart(item){
        this.Cart.push({
          Tid:item.Tid,
          id:item.id,
          name:item.name,
          price:item.price,
          img:item.img,
          num:1,
          Total_price:item.price*item.num
        })
      },
      //购物车加减
      Cart_num(item,type){
        let i=this.Cart.find(it=>it.id==item)
        if(type=='+'){
         i.num++
         i.Total_price=i.price*i.num
        }else if(type=='-'&&i.num>1){
          i.num--
          i.Total_price=i.price*i.num
        }
      },//跳转到结算页面
     toSettlement(){
      let x=[]
      this.Cart.forEach(item=>{
        if(item.is){
          x.push(item)
        }
      })
      localStorage.setItem('Cart',JSON.stringify(x))
       this.$router.push('/about')
    }
     },
     // 计算属性
     computed: {
       // 过滤出对应tab的商品
      tabMOD(){
        let x=this.arr.filter(item=>item.Tid==this.tabIndex)
        return x
      },
      // 计算购物车总价
      totalPrice(){
        let sum=0
        this.Cart.forEach(item=>{
          if(item.is){
            sum+=item.Total_price 
          }
        })
        return sum
      }
     },
     // 创建后（只能访问数据，不能操作dom）
     created () {
     },
     // 挂载后（既能访问数据，也能操作dom）
     mounted () {
     },
     // 过滤器
     filters: {
      // 格式化价格
      formatPrice(price){
        return '¥'+price.toFixed(2)
      }
     }
  }
</script>
<style lang="less" scoped>
  #box{
    width: 400px;
    height: 500px;
    background-color: gray;
  }
  .tab{
    display: flex;
    flex-direction: column
  }
  .tab ul{
    display: flex;
    list-style: none;
    justify-content: space-around;
  }
  .tab img{
    width: 150px;
    height: 150px;
  }
  .content{
    display: flex;
    flex-wrap: wrap
  }
  .add{
    display: flex;
    justify-content: space-between
  }
  .Shopping_Cart img{
    width: 50px;
    height: 50px;
  }
  .Shopping_Cart_content1{
    width: 400px;
    height: 300px;
    position: absolute;
    position: absolute;
    margin: -300px auto;
    background-color: aqua;
  }
  .Shopping_Cart_content2{
    display: flex;
    justify-content: space-between;
  }
  .Shopping_Cart_content1_item{
    display: flex;
  }
  .Shopping_Cart_content1_item_right{
    display: flex;
    flex-direction: column
  }
  .Shopping_Cart_content1_item_right_price{
    display: flex;
    justify-content: space-between
  }
</style>
